<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="inpValue" @keydown.enter="add">
			<ul>
				<li v-for="(item,index) in arr" :key="item.id">
					{{item.name}}
					<button @click="del(item.id)">删除</button>
					<!-- <button @click="del(index)">删除</button> -->
				</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					inpValue:"",
					arr:[
						{id:0,name:"小张"},
						{id:1,name:"小王"},
						{id:2,name:"小李"}]
				},
				methods:{
					add(){
						let obj={
							id:new Date().getTime(),
							name:this.inpValue
						}
						this.arr.unshift(obj);
						this.inpValue="";
					},
					// del(index){//index 索引  方法1
					// 	this.arr.splice(index,1);
					// }
					del(id){
						//方法3：
						let obj=this.arr.find(item=>{//找id相同的那项内容
							return item.id==id
						})
						
						let index=this.arr.indexOf(obj);//通过内容找到索引
						
						this.arr.splice(index,1);//删除数据
						
						//方法2：
						// this.arr=this.arr.filter((item)=>{
						// 	return item.id!=id
						// })
					}
				}
			})
		</script>
	</body>
</html>
